<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Quartz动态配置</title>
	<!-- 引入样式 -->
	<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
</head>
<body>
	<div id="app">
		<div>
			<span><a href="/druid" target="_blank">druid数据源监控</a></span>
		</div>

		<el-button type="primary" @click="add()" style="margin: 20px 0" size="mini">新增</el-button>
		<el-table
				size="mini"
				border
				stripe
				:data="tableData"
				style="width: 100%">
			<el-table-column
					align="center"
					prop="id"
					label="ID"
					width="80">
			</el-table-column>
			<el-table-column
					align="center"
					prop="jobName"
					label="任务名"
					width="180">
			</el-table-column>
			<el-table-column
					align="center"
					prop="cron"
					label="cron表达式"
					width="200">
			</el-table-column>
			<el-table-column
					align="center"
					prop="beanClass"
					label="类名(首字母小写)">
			</el-table-column>
			<el-table-column
					align="center"
					prop="methodName"
					label="方法名">
			</el-table-column>
			<el-table-column
					width="100"
					align="center"
					prop="status"
					label="状态">
				<template slot-scope="scope">
					<el-tag type="success" size="mini" v-if="scope.row.status === '1'">运行中</el-tag>
					<el-tag size="mini" v-if="scope.row.status === '3'">未启动</el-tag>
					<el-tag type="danger" size="mini" v-if="scope.row.status === '2'">暂停中</el-tag>
				</template>
			</el-table-column>
			<el-table-column
					align="center"
					min-width="120"
					prop="createTime"
					label="创建时间">
			</el-table-column>
			<el-table-column
					align="center"
					min-width="120"
					prop="updateTime"
					label="修改时间">
			</el-table-column>
			<el-table-column
					align="center"
					min-width="180"
					label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
					<el-button type="text" size="mini" @click="update(scope.row)">修改</el-button>
					<el-button type="text" size="mini" @click="start(scope.row)">手动执行一次</el-button>
					<el-button type="text" size="mini" @click="stop(scope.row)" >暂停</el-button>
					<el-button type="text" size="mini" @click="resume(scope.row)" >恢复</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
			<el-form :model="form" size="mini">
				<el-form-item label="任务名" :label-width="formLabelWidth">
					<el-input v-model="form.jobName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="cron" :label-width="formLabelWidth">
					<el-input v-model="form.cron" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="类名(首字母小写)" :label-width="formLabelWidth">
					<el-input v-model="form.beanClass" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="方法名" :label-width="formLabelWidth">
					<el-input v-model="form.methodName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="任务描述" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.description" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
				<el-button size="mini" type="primary" @click="submit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                title: '',
                formLabelWidth: '120px',
                dialogFormVisible: false,
                tableData: [],
				form: {}
            }
        },
		mounted() {
			this.init()
		},
        methods: {
			init() {
			    axios.get('/job/all').then(res => {
                    console.log(res.data)
			        this.tableData = res.data
				})
			},
			add() {
			    this.title = '新增定时任务'
			    this.dialogFormVisible = true
			},
			submit(){
				//
				this.form.status = 1
				axios.post('/job/saveOrUpdate', this.form).then(res => {
					this.init()
					this.dialogFormVisible = false
					if(this.form.id === undefined) {
						this.$message.success('新增成功')
					} else {
						this.$message.success('修改成功')
					}
				})
			},
			update(row) {
                this.title = '修改定时任务'
                this.dialogFormVisible = true
                this.form = JSON.parse(JSON.stringify(row))
			},
            del(row) {
				this.$confirm('是否确定删除？', '警告', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.delete('/job/delete', {
						data: row
					}).then(res => {
						this.init()
						this.$message.success('删除成功')
					})
				}).catch(err => {})
			},
			start(row) {
				row.status = 1
				axios.post('/job/trigger', row).then(res => {
					if(res.data.code === 200) {
						this.init()
						this.$message.success('手动执行成功')
					} else {
						this.$message.error('手动执行失败')
					}
				})
			},
			stop(row) {
				row.status = 2
				axios.post('/job/pause', row).then(res => {
					if(res.data.code === 200) {
						this.init()
						this.$message.success('停止成功')
					} else {
						this.$message.error('停止失败')
					}
				})
			},
			resume(row) {
				row.status = 1
				axios.post('/job/resume', row).then(res => {
					if(res.data.code === 200) {
						this.init()
						this.$message.success('恢复成功')
					} else {
						this.$message.error('恢复失败')
					}
				})
			}
        }
    })
</script>
</html>
